<template>
  <div>
    <header class="top">
      
      <div class="top_">
      
       <router-link tag="span"  to="day1">&lt</router-link>
      <span><img src="../assets/B%3GF%{IPWGVJ@CNQ7~F}~W.png" alt=""></span>
      </div>
    <div class="top-cen">
      <div><img src="https://fuss10.elemecdn.com/1/32/c75a72f674052473fb35b5c8ab1d7jpeg.jpeg?imageMogr/format/webp/thumbnail/!130x130r/gravity/Center/crop/130x130/" alt=""></div>
      <div>
            <h2>北京麦当劳祈年大街餐厅</h2>
            <p>
            商家配送
            33分钟送达
            
            配送费¥9
          
          </p>
          <p>
            公告：欢迎光临，用餐高峰期请提前下单，谢谢。
          </p>

      </div>
    </div>


    <div class="sp_">
      <span>
        <span class="sp__">特</span>
        【专享玩具套餐】美味亦是正义
      </span>
      <span>
      
        2个活动
      </span>
    </div>
    </header>


   





  </div>
</template>
<script>
 
export default {
   

};
</script>
<style lang="less">
.px2rem(@prop,@px) {
  @{prop}: @px /75 * 1rem;
}
.top {
  background: rgb(166, 44, 24);

  color: #fff;
  .top_ {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width:97%;
    margin: 0 auto;
  }
  .top-cen{
    width: 100%;
    display: flex;
    div{
      h2{
        font-weight: bold;
        margin-top:3%
;      }
      img{
        width: 70%;
        height: 80%;
        margin: 2%;
      }
    }
  }
}
.sp_{
  
  color: #fff;
  display: flex;
  justify-content: space-between
  
}
.sp__{
    background:red;
  }
  .wrap div{
        width: 300px;
        height: 300px;
        background-color: #0cc;
    }
.active{
    background-color: red
}
</style>
